<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        #red{
            color: red;
        }
        #green{
            color: green;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--<div v-bind:id="{red isActive}"></div>-->
        <input type="text" value="1" v-model='msg'>
        <span v-once>{{msg}}</span>
        
        <button v-bind:disabled='disabled'>样式按钮</button>
        <p v-text='rawHtml' v-bind:id="id=='red'? id : 'green' "></p>
        <p v-if='seen'>你可以看见我</p>
        <a v-on:click='clickHandle' v-bind:href='url'>戳我试试</a>
        <form action="#" v-on:submit.prevent='onSubmit'>
            <input type="submit" value="提交">
        </form>
        <p  v-bind:id="capitalize('world') | capitalize('world','hello')">过滤器</p>
        
    </div>
    <div id="emp">
        <p>原始信息：{{msg}}</p>
        <p>计算后信息：{{reverseMsg}}</p>
    </div>
    <script>
        // 每个vue对象都能代理data中的所有属性
        var data = { a: 1 }
        var vm = new Vue({
            data: data
        })
        vm.$watch('a', (newVal, oldVal) => this.a)
        
        var app = new Vue({
            el: '#app',
            data: {
                msg: '1',
                rawHtml:'<span>我是HTML</span>',
                disabled:true,
                id:'red',
                seen:true,
                url:'http://www.baidu.com',
                capitalize:function(value){
                    if(!value) return ''
                    value = value.toString()
                    return value.charAt(0).toUpperCase()+value.slice(1)
                },
                isActive: false
            },
            methods:{
                clickHandle:function(){
                    console.log('你点击了')
                },
                onSubmit:function(){
                    console.log('form is submited')
                }
            },
            filters:{
                capitalize:function(value){
                    if(!value) return ''
                    value = value.toString()
                    return value.charAt(0).toUpperCase()+value.slice(1)
                }
            }
        })

        var emp = new Vue({
            el:'#emp',
            data:{
                msg:'hello'
            },
            computed:{
                reverseMsg:function(){
                    return this.msg.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

</html>